<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房地产公司主页</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css"> <!-- 用于样式的外部CSS -->
    <!-- <script>
        document.querySelector('form').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the form from submitting normally
    
            const name = document.querySelector('input[placeholder="姓名"]').value;
            const email = document.querySelector('input[placeholder="电子邮件"]').value;
            const message = document.querySelector('textarea[placeholder="留言"]').value;
    
            if (name === "a" && email === "aa" && message === "aaa") {
                window.location.href = "login.html"; // Replace with your target page
            } else {
                alert("Please enter the correct values.");
            }
        });
    </script> -->
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        /* Navigation Bar */
        nav {
            background-color: #2c3e50;
            padding: 10px 20px;
        }
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-between;
        }
        nav ul li {
            display: inline;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            padding: 10px 20px;
        }
        nav ul li a:hover {
            background-color: #34495e;
        }

        /* Hero Section */
        .hero {
            position: relative;
            /* 轮播图背景图片 */
            /* background-image: url('https://example.com/your-image.jpg');  */
            background-size: cover;
            background-position: center;
            height: 60vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
            animation: slide 15s infinite;
        }

        /* 轮播图的动画效果 */
        @keyframes slide {
            0% { background-image: url('/static/photos/bailey-anselme-Bkp3gLygyeA-unsplash.jpg'); }
            33% { background-image: url('/static/photos/digital-marketing-agency-ntwrk-g39p1kDjvSY-unsplash.jpg'); }
            66% { background-image: url('/static/photos/frames-for-your-heart-2d4lAQAlbDA-unsplash.jpg'); }
            100% { background-image: url('/static/photos/collov-home-design-H-1j_s0dhCw-unsplash.jpg'); }
        }
        
        .hero h1 {
            font-size: 3rem;
            text-align: center;
        }
        .hero p {
            font-size: 1.2rem;
            text-align: center;
        }

        /* About Us Section */
        .about-us {
            padding: 50px 20px;
            text-align: center;
            background-color: #fff;
        }
        .about-us h2 {
            font-size: 2.5rem;
            color: #2c3e50;
        }
        .about-us p {
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto;
        }

        /* Properties Section */
        .properties {
            padding: 50px 20px;
            background-color: #ecf0f1;
        }
        .properties h2 {
            text-align: center;
            font-size: 2.5rem;
            color: #2c3e50;
        }
        .property-cards {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .property-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 20px;
            width: 300px;
            overflow: hidden;
        }
        .property-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .property-card .info {
            padding: 20px;
        }
        .property-card h3 {
            font-size: 1.8rem;
            color: #2c3e50;
        }
        .property-card p {
            font-size: 1rem;
            color: #7f8c8d;
        }

        /* Contact Us Section */
        .contact-us {
            background-color: #2c3e50;
            color: white;
            padding: 50px 20px;
            text-align: center;
        }
        .contact-us h2 {
            font-size: 2.5rem;
        }
        .contact-us form {
            max-width: 600px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }
        .contact-us input, .contact-us textarea {
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            border: none;
            font-size: 1rem;
        }
        .contact-us button {
            padding: 10px 20px;
            background-color: #3498db;
            border: none;
            border-radius: 5px;
            font-size: 1.2rem;
            color: white;
            cursor: pointer;
        }
        .contact-us button:hover {
            background-color: #2980b9;
        }

        footer {
            background-color: #34495e;
            color: white;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>

    <!-- Navigation -->
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">房产列表</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div>
            <h1>梦想家园，等待您来发现</h1>
            <p>为您提供优质的房地产项目，选择一个更美好的生活</p>
        </div>
    </section>

    <!-- About Us Section -->
    <section class="about-us">
        <h2>关于我们</h2>
        <p>我们是一家专注于房地产开发与销售的公司，致力于为客户提供优质的房产项目。我们的团队在行业内有着丰富的经验和强大的资源，力求为每一个家庭打造温馨舒适的家。</p>
    </section>

    <!-- Properties Section -->
    <section class="properties">
        <h2>精选房产</h2>
        <div class="property-cards">
            <div class="property-card">
                <img src="/static/photos/jason-briscoe-UV81E0oXXWQ-unsplash.jpg" alt="房产1">
                <div class="info">
                    <h3>现代公寓</h3>
                    <p>精装修2室1厅，宜居环境，交通便利。</p>
                </div>
            </div>
            <div class="property-card">
                <img src="/static/photos/webaliser-_TPTXZd9mOo-unsplash.jpg" alt="房产2">
                <div class="info">
                    <h3>豪华别墅</h3>
                    <p>宽敞的空间和高档设施，完美的家庭选择。</p>
                </div>
            </div>
            <div class="property-card">
                <img src="/static/photos/jason-briscoe-UV81E0oXXWQ-unsplash.jpg" alt="房产3">
                <div class="info">
                    <h3>海景公寓</h3>
                    <p>面对大海，享受宁静与美景。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Us Section -->
    <section class="contact-us">
        <h2>联系我们</h2>
        <form method="POST">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required>
            <br>
            <label for="email">电子邮件:</label>
            <input type="text" id="email" name="email" required>
            <br>
            <label for="message">留言:</label>
            <textarea id="message" name="message" rows="4" required></textarea>
            <br>
            <button type="submit">提交</button>
        </form>
    </section>

    <!-- Footer -->
    <footer>
        <p>&copy; 2025 房地产公司 | 版权所有</p>
    </footer>

</body>
</html>
